<template>
	<div class="wrapper">
		<div class="main_box">
			<!-- 可以使用 CellGroup 作为容器 -->
			<van-cell-group inset>
				<van-field v-model="templateName" label-width="100" label="模板名称" placeholder="请输入模板名称"
					input-align="right" :border="false" readonly />
				<van-field v-model="creditCardDrate" label-width="140" label="信用卡成本(%)" placeholder="请输入信用卡成本"
					input-align="right" :border="false" readonly />

				<!-- <van-field v-model="debitCardDrate" label-width="140" label="借记卡T0费率(%)" placeholder="请输入借记卡T0费率"
					input-align="right" :border="false" readonly /> -->
				<!-- <van-field v-model="dcardCap" label-width="140" label="借记卡封顶(元)" placeholder="请输入借记卡封顶"
					input-align="right" :border="false" readonly /> -->
				<van-field v-model="ysfRate" label-width="140" label="闪付(%)" placeholder="请输入闪付" input-align="right"
					:border="false" readonly />
				<van-field v-model="largeZfbRate" label-width="140" label="支付宝大额(%)" placeholder="请输入支付宝大额"
					input-align="right" :border="false" readonly />
				<van-field v-model="casRate" label-width="140" label="刷卡D0成本(元)" type="digit" placeholder="请输入刷卡D0成本" input-align="right"
					:border="false" readonly />
				<van-field v-model="withdrawRateCost" label-width="140" label="提现费率成本(%)" type="digit" placeholder="请输入提现费率成本"
					input-align="right" :border="false" readonly />
				<!-- <van-field v-model="ccardTrateYx" label-width="140" label="优惠贷记卡费率(%)" placeholder="请输入提现费率成本"
					input-align="right" :border="false" readonly /> -->
				<van-field v-model="firstSimCost" label-width="140" label="首次流量卡成本(元)" type="digit" placeholder="请输入首次流量卡成本"
					input-align="right" :border="false" readonly />
					<van-field v-model="repeSimCost" label-width="140" label="多次流量卡成本(元)" type="digit" placeholder="请输入多次流量卡成本"
					input-align="right" :border="false" readonly />
				<div class="custom-field--disabled">
					<van-field v-model="settle" label-width="140" label="是否结算" placeholder="请选择是否结算" input-align="right"
						:border="false" right-icon="arrow" :disabled="isDisabled" readonly />
				</div>

			</van-cell-group>
		</div>
		<div class="dis" v-for="(item,index) in agentTemplateSubsidyRateList" :key="index"
			style="justify-content: center;">
			<div class="main_box" style="margin-top: 20px;margin-left: 2px;">
				<van-field v-model="item.subsidyPeriod" label-width="100" type="digit" label="补贴周期(天)"
					placeholder="请输入补贴周期" input-align="right" :border="false" readonly />
				<van-field v-model="item.subsidyRate" label-width="140" label="补贴费率(%)" placeholder="请输入补贴费率"
					input-align="right" :border="false" readonly />
			</div>
		</div>
		<!-- <div class="dis">
			<div class="allowance" @click="benefit">
				<div class="dis">
					<div class="dis">
						<img src="/src/assets/terminal/addition.png" alt="" />
					</div>
					<div class="collocate">
						添加津贴配置
					</div>
				</div>
			</div>
		</div>
		<div class="dis">
			<div class="btn_box">
				<div class="btn dis" @click="subment">
					确定
				</div>
			</div>
		</div> -->
		<van-popup v-model:show="show" destroy-on-close round position="bottom">
			<van-picker v-model="settleList" :clickable="true" :is-link="true" :columns="columns" @cancel="show = false"
				@confirm="onConfirm" />
		</van-popup>
	</div>
</template>

<script>
	import {
		insertAgentTemplatePosChannelRate,
		selectAgentTemplatePosChannelRateById,
		updateAgentTemplatePosChannelRate
	} from '@/api/terminal'
	import store from '@/store'
	import {
		showToast,
		showConfirmDialog,
		SwipeCell
	} from 'vant'
	import {
		useRoute,
		useRouter,
		RouterView
	} from 'vue-router'
	import {
		defineComponent,
		reactive,
		toRefs,
		ref,
		onMounted
	} from 'vue';
	export default defineComponent({
		name: 'sateActive',
		setup() {
			const router = useRouter()
			const routers = useRoute()
			const state = reactive({
				benefitIndex: 0,
				columns: [{
						text: '是',
						value: '0'
					},
					{
						text: '否',
						value: '1'
					}
				],
				show: false,
				settle: "",
				settleList: [],
				isDisabled: true,
				agentTemplateSubsidyRateList: [{
					subsidyPeriod: "",
					subsidyRate: ""
				}]
			})
			const info = reactive({
				templateName: "",
				creditCardDrate: "",
				debitCardDrate: "",
				dcardCap: "35",
				ysfRate: "",
				largeZfbRate: "",
				casRate: "",
				withdrawRateCost: "",
				ccardTrateYx: "",
				settlementStatus: '',
				agentTemplateSubsidyRateListStr: [],
				configId: "",
				repeSimCost: "",
				firstSimCost: ""
			})
			//校验空值
			const validateForm = (info) => {
				const errors = [];

				if (!info.templateName) errors.push('模板名称不能为空');
				if (!info.creditCardDrate) errors.push('信用卡成本不能为空');
				// if (!info.debitCardDrate) errors.push('借记卡T0费率不能为空');
				// if (!info.dcardCap) errors.push('借记卡封顶不能为空');
				if (!info.ysfRate) errors.push('闪付不能为空');
				if (!info.largeZfbRate) errors.push('支付宝大额不能为空');
				if (!info.casRate) errors.push('刷卡D0成本不能为空');
				if (!info.withdrawRateCost) errors.push('提现费率成本不能为空');
				// if (!info.ccardTrateYx) errors.push('优惠贷记卡费率不能为空');
				if (!info.repeSimCost) errors.push('多次流量卡成本不能为空');
				if (!info.firstSimCost) errors.push('首次流量卡成本不能为空');
				if (info.settlementStatus === '') errors.push('是否结算不能为空'); // 注意这里，我们只检查是否为空字符串

				// 检查子列表中的字段
				state.agentTemplateSubsidyRateList.forEach((item, index) => {
					if (!item.subsidyPeriod) errors.push(`补贴周期不能为空`);
					if (!item.subsidyRate) errors.push(`补贴费率不能为空`);
				});

				return errors;
			};
			//提交
			const subment = () => {
				const errors = validateForm(info);
				if (errors.length > 0) {
					showToast(errors[0])
					return
				}
				info.agentTemplateSubsidyRateListStr = JSON.stringify(state.agentTemplateSubsidyRateList)
				info.dcardCap = info.debitCardDrate
				info.ccardTrateYx = info.debitCardDrate
				info.debitCardDrate = info.creditCardDrate
				if (routers.query.type == 1) {
					insertAgentTemplatePosChannelRate(info).then(res => {
						showToast('新增成功')
						setTimeout(() => {
							router.go(-1)
						}, 1000)
					})
				} else {
					console.log(info)
					updateAgentTemplatePosChannelRate(info).then(res => {
						showToast('修改成功')
						setTimeout(() => {
							router.go(-1)
						}, 1000)

					})
				}

			}
			//点击右侧按钮
			const righticon = () => {
				state.show = true
			}
			//点击删除按钮
			const beforeClose = (item, index) => {
				console.log(item)
				state.agentTemplateSubsidyRateList.splice(index, 1)
			};
			//点击确认
			const onConfirm = (e) => {
				console.log(e)
				info.settlementStatus = e.selectedOptions[0].value
				state.settle = e.selectedOptions[0].text
				state.show = false
			}
			//添加津贴
			const benefit = () => {
				// state.benefitIndex++
				console.log(state.agentTemplateSubsidyRateList)
				state.agentTemplateSubsidyRateList.push({
					subsidyPeriod: "",
					subsidyRate: ""
				})
			}
			const detail = () => {
				let parames = {
					configId: routers.query.configId
				}
				selectAgentTemplatePosChannelRateById(parames).then(res => {
					// info = res.data
					for (let i in res.data) {
						for (let k in info) {
							if (i == k) {
								info[k] = res.data[i]
							}
							if (i == 'settlementStatus') {
								if (res.data[i] == 0) {
									state.settle = '是'
								} else {
									state.settle = '否'
								}

							}
						}

					}
					if (res.data.agentTemplateSubsidyRateList == null) {
						state.agentTemplateSubsidyRateList = []
						return
					}
					state.agentTemplateSubsidyRateList = res.data.agentTemplateSubsidyRateList
					for (let j in res.data.agentTemplateSubsidyRateList.length - 1) {
						state.agentTemplateSubsidyRateList.push({
							subsidyPeriod: "",
							subsidyRate: ""
						})
					}
					for (let i in res.data.agentTemplateSubsidyRateList) {
						for (let k in state.agentTemplateSubsidyRateList) {
							if (i == k) {
								state.agentTemplateSubsidyRateList[k] = res.data
									.agentTemplateSubsidyRateList[i]
							}
						}
					}
				})
			}
			if (routers.query.type == 2) {
				detail()
			}
			return {
				...toRefs(state),
				...toRefs(info),
				benefit,
				beforeClose,
				subment,
				righticon,
				onConfirm,
				validateForm,
				detail
			}
		}
	})
</script>
<style scoped lang="scss">
	.wrapper {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: #fff;
		padding: 12px 18px 24px 18px;
		box-sizing: border-box;

		.main_box {
			border-radius: 6px 6px 6px 6px;
			box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
			padding: 5px 0px;
			box-sizing: border-box;
			width: 100%;

			.overlay {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
				/* 确保覆盖层在输入框之上 */
			}
		}

		.allowance {
			border-radius: 6px 6px 6px 6px;
			box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 14px;
			color: #FF2828;
			width: 100%;
			padding: 8px 0px;
			box-sizing: border-box;
			margin-top: 10px;

			.collocate {
				margin-left: 4px;
			}

			img {
				width: 16px;
				height: 16px;
			}
		}

		::v-deep .van-cell-group {
			margin: 0px !important;
		}

		::v-deep .van-field__label {
			color: #333 !important;
		}

		.btn_box {
			// position: absolute;
			// bottom: 10%;
			// left: 50%;
			// transform: translateX(-50%);
			margin-top: 24px;

			.btn {
				width: 339px;
				height: 40px;
				background: #FF2828;
				border-radius: 6px 6px 6px 6px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 15px;
				color: #FFFFFF;
			}
		}

		::v-deep .van-field__control:disabled {
			color: #333 !important;
		}

		.custom-field--disabled {
			cursor: not-allowed;
			position: relative;
		}

		.custom-field--disabled .van-field__control {
			pointer-events: none;
			/* 禁用输入框的点击事件 */
		}
	}
</style>